<template>
	<block v-if="token">
		<mescroll-uni ref="mescroll" @getData="getListData">
			<block slot="list">
				<block v-if="list.length > 0">
					<view class="record-item" v-for="(item, index) in list" :key="index">
						<view class="image-wrap">
							<image :src="$util.img('upload/uniapp/game/point.png')" mode="widthFix" v-if="item.award_type == 1"></image>
							<image :src="$util.img('upload/uniapp/game/balance.png')" mode="widthFix" v-if="item.award_type == 2"></image>
							<image :src="$util.img('upload/uniapp/game/coupon.png')" mode="widthFix" v-if="item.award_type == 3"></image>
							<image :src="$util.img('upload/uniapp/game/gift.png')" mode="widthFix" v-if="item.award_type == 4"></image>
						</view>
						<view class="content">
							<view class="name">{{ item.award_name }}</view>
							<view class="cont ns-font-size-sm" v-if="item.award_type == 1">奖励详情：{{ item.point }}个积分</view>
							<view class="cont ns-font-size-sm" v-if="item.award_type == 2">奖励详情：{{ item.balance }}元红包</view>
							<view class="cont ns-font-size-sm" v-if="item.award_type == 3">奖励详情：优惠券“{{ item.relate_name }}”</view>
							<view class="time ns-font-size-sm">中奖时间：{{ $util.timeStampTurnTime(item.create_time) }}</view>
						</view>
						<view class="btn" v-if="item.award_type == 1" @click="$util.redirectTo('/otherpages/member/point/point')">查看</view>
						<view class="btn" v-if="item.award_type == 2" @click="$util.redirectTo('/otherpages/member/balance_detail/balance_detail')">查看</view>
						<view class="btn" v-if="item.award_type == 3" @click="$util.redirectTo('/otherpages/member/coupon/coupon')">查看</view>
					</view>
				</block>
				<block v-else>
					<ns-empty text="您当前还没有过中奖记录" :isIndex="false" ></ns-empty>
				</block>
				
				<loading-cover ref="loadingCover"></loading-cover>
			</block>
		</mescroll-uni>
	</block>
	<block v-else>
		<view>
			<ns-empty text="" :emptyBtn="emptyBtn1" :fixed="!0" :urlParam="urlParam"></ns-empty>
		</view>
		
	</block>
	
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				id: 0,
				token:'',
				emptyBtn1: {
					text: "去登录",
					url: '/pages/login/login/login'
				},
				urlParam:'/promotionpages/game/record/record'
			};
		},
		onLoad(option) {
			if (option.id) {
				this.id = option.id;
				this.urlParam = '/promotionpages/game/record/record?id='+option.id;
			}
			this.token = uni.getStorageSync('token');
		},
		onShow() {
			// 刷新多语言
			this.$langConfig.refresh();
			this.list = [];
			if (this.$refs.mescroll) this.$refs.mescroll.refresh();
		},
		methods: {
			getListData(mescroll) {
				this.showEmpty=false;
				this.$api.sendRequest({
					url: '/api/game/recordPage',
					data: {
						id: this.id,
						page: mescroll.num,
						page_size: mescroll.size,
						site_id:1
					},
					success: res => {
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
						this.showEmpty=true;
						let newArr = [];
						let msg = res.message;
						if (res.code == 0 && res.data) {
							newArr = res.data.list;
						} else {
							this.$util.showToast({
								title: msg
							});
						}
						mescroll.endSuccess(newArr.length);
						//设置列表数据
						if (mescroll.num == 1) this.list = []; //如果是第一页需手动制空列表
						this.list = this.list.concat(newArr); //追加新数据
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					},
					fail: res => {
						mescroll.endErr();
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.record-item{
		padding: 30rpx 20rpx;
		margin: 20rpx;
		background-color: #fff;
		border-radius: 8rpx;
		box-shadow: 0 0 8px 0 hsla(0,0%,59.6%,.2);
		display: flex;
		align-items: center;
		
		.image-wrap{
			width: 80rpx;
			height: 80rpx;
			overflow: hidden;
			display: flex;
			justify-content: center;
			align-items: center;
			
			image{
				width: 80rpx;
			}
		}
		
		.content{
			flex: 1;
			padding: 0 20rpx;
			
			.name {
				
			}
			
			.time,.cont{
				color: #999;
				line-height: 1.2;
				margin-top: 10rpx;
			}
		}
		
		.btn{
			width: 128rpx;
			color: #fff;
			padding: 8rpx 0;
			font-size: 28rpx;
			line-height: 40rpx;
			text-align: center;
			border-radius: 40rpx;
			background-image: linear-gradient(-117deg,#ff9134,#f63d3d);
		}
	}
</style>